<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>道具分类编辑</title>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css" media="all" />

</head>
<style>

    .poppup-edit {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        background: #000;
        background: rgba(0, 0, 0, .8);
        border-radius: 5px;
        z-index: 100;
        width: 700px;
        min-height: 500px;
        background-color: white;
        border: 1px solid #ccc
    }

    .edittype {
        /*position: absolute;*/
        display: none;
        /*top: 200px;*/
        /*left: 400px;*/
        /*padding: 20px;*/
        /*background: #000;*/
        /*background: rgba(0, 0, 0, .8);*/
        /*border-radius: 5px;*/
        /*z-index: 100;*/
        /*width: 700px;*/
        /*min-height: 300px;*/
        /*background-color: white;*/
        /*border: 1px solid #ccc*/
    }

    .editmap{
        display: none;
    }

    .modal-header{
        border: 0;
    }
    .modal-header a{
        float: right;
    }
    .modal-header a span{
        font-size: 20px;
    }
    .is-update{
        position: absolute;bottom:0; width: 64px;height: 20px;background-color: #93D1FF;opacity:0.8;margin-left: 15px;color: blue;
    }
    .blue{
        color: blue;
    }

    .item-div{
        text-align: center;margin: 10px 0px 0px 10px
    }
    .item-div p {
        width: 90px;height: 30px
    }
    .hide {
        display: none;
    }
    .prop-itemtype-title{
        border-bottom: 1px solid #e2e2e2;
        padding: 15px 0;
        font-size: 23px;
        margin-bottom: 10px;
    }
    /*编辑弹框*/
    .edit-box{
        padding: 20px;
    }
    .edit-box-margin{
        margin-bottom: 20px !important;
    }

</style>

<body>

<div style="margin: 20px;">
    <!--分类编辑-->
    <div class="prop-itemtype-title">
        <p>道具分类管理</p>
    </div>
    <button class="edit-itemtype layui-btn" lay-data="0">添加分类</button>
    <table class="layui-table layui-col-lg10" >
        <colgroup>
            <col width="150">
            <col width="200">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>别名</th>
            <th>父级分类</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach $item_type as $val}
        <tr class="type{$val.id}" lay-data="{$val.parentId}">
            <td>{$val.id}</td>
            <td>{$val.title}</td>
            <td>{$val.alias}</td>
            <td>{$val.parentTitle}</td>
            <td>{$val.creater}</td>
            <td>{$val.createTime}</td>
            <td><button class="edit-itemtype layui-btn" lay-data="{$val.id}">编辑</button>
                <button class="del-itemtype layui-btn" lay-data="{$val.id}">删除</button>
            </td>
        </tr>
        {/foreach}
        </tbody>


    </table>

    <!--地图编辑-->
    <div class="prop-itemtype-title">
        <p>地图管理</p>
    </div>
    <button class="edit-map layui-btn" lay-data="0">添加地图</button>
    <table class="layui-table layui-col-lg10" >

        <colgroup>
            <col width="150">
            <col width="200">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>别名</th>
            <th>备注</th>
            <th>状态</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach $map as $val}
        <tr class="map{$val.id}" lay-data="">
            <td>{$val.id}</td>
            <td>{$val.name}</td>
            <td>{$val.alias}</td>
            <td>{$val.remark}</td>
            <td class="mapstatus{$val.id}">
                {if $val.status == 1}
                正常
                {elseif $val.status == 2}
                废弃
                {else}
                其他
                {/if}
            </td>
            <td>{$val.creater}</td>
            <td>{$val.createTime}</td>
            <td><button class="edit-map layui-btn" lay-data="{$val.id}">编辑</button>
                <button class="del-map layui-btn" lay-data="{$val.id}">删除</button>
            </td>
        </tr>
        {/foreach}
        </tbody>


    </table>


</div>


<div class="edittype">
    <form class="layui-form edit-box">
        <div class="layui-form-item">
            <div class=" layui-inline edit-box-margin">
                <!--<label class="layui-form-label">ID</label>-->
                <div class="layui-input-inline">
                    <input type="hidden" name="id" id="id" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-inline edit-box-margin">
                <label class="layui-form-label">父级分类</label>
                <div class="layui-input-inline">
                    <select id="parentId" name="parentId" lay-verify="">
                        <option value="0" selected>空</option>
                        {foreach $item_type as $val1}
                        <option value="{$val1.id}">{$val1.title}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline edit-box-margin">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline edit-box-margin">
                <label class="layui-form-label">别名</label>
                <div class="layui-input-inline">
                    <input type="text" id="alias" name="alias" lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editItemType">立即提交</button>
            </div>
        </div>
    </form>
</div>

<div class="editmap">
    <form class="layui-form edit-box" >
        <div class="layui-form-item">
            <div class=" layui-inline edit-box-margin">
                <!--<label class="layui-form-label">ID</label>-->
                <div class="layui-input-inline">
                    <input type="hidden" name="id" id="mapid" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="1" title="正常" checked>
                    <input type="radio" name="status" value="2" title="废弃">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline edit-box-margin">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="maptitle" name="name" lay-verify="required" placeholder="请输入地图名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">别名</label>
                <div class="layui-input-inline">
                    <input type="text" id="mapalias" name="alias" lay-verify="required" placeholder="请输入地图别名" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline edit-box-margin">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" id="remark" name="remark" placeholder="请输入地图备注" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editmapbut">立即提交</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="Public/Plug/layui/layui.js"></script>

<script>

    layui.use(['layer','element','form'], function() {
        var	$ = layui.jquery,
            element = layui.element,
            form = layui.form;
        var title='';


        $(".edit-itemtype").click(function () {

            var id = $(this).attr('lay-data');

            if (id > 0){
                var cla = "type"+id;
                var selectParent = $(".type"+id).attr('lay-data');
                $("select[name=parentId]").val(selectParent);
                $("#id").val($(".type"+id).find("td").eq(0).html());
                $("#title").val($(".type"+id).find("td").eq(1).html());
                $("#alias").val($(".type"+id).find("td").eq(2).html());
                title = '编辑道具分类';
            }else {
                $("select[name=parentId]").val(0);
                $("#id").val('');
                $("#title").val('');
                $("#alias").val('');
                title = '添加道具分类';

            }
            form.render();

            layer.open({
                type: 1,
                title :title,
                area: ['400px', '450px'],
                content: $(".edittype")
            });
        });

        // 编辑道具分类
        form.on('submit(editItemType)', function(data){
            var url = "{U('Prop/editItemType')}";
            $.post(url,data.field,function (res) {

                var data = eval('(' + res + ')');
                if (data.iRet === 0){
                    layer.msg(data.sMsg, {
                        icon: 1,//成功的表情
                        time: 1000,
                        end:function(){
                            window.location.reload();
                        }
                    });


                }else {
                    layer.msg(data.sMsg, {
                        icon: 2,
                        time: 1000
                    });
                }
            });

            return false;


        });

        //删除道具分类
        $('.del-itemtype').click(function () {
            var id = $(this).attr('lay-data');

            layer.confirm('确定删除该道具分类？', {
                btn: ['是','否'], //按钮
                shade: false //不显示遮罩
            }, function(index){

                var data = {
                    "id": id,
                }
                var url = "{U('Prop/delItemType')}";
                $.post(url,data,function (res) {
                    var data = eval('(' + res + ')');
                    if (data.iRet === 0){
                        layer.msg('操作成功', {
                            icon: 1,//成功的表情
                            time: 1000
                        });

                    }else {
                        layer.msg('操作失败', {
                            icon: 2,
                            time: 1000
                        });
                    }
                    layer.close(index);

                });
                window.location.reload()

            });
        });

        $(".edit-map").click(function () {

            var id = $(this).attr('lay-data');
            $('input[name="status"]').prop('checked',false);

            if (id > 0){
                var cla = "map"+id;
                // var selectParent = $(".type"+id).attr('lay-data');
                // $("select[name=parentId]").val(selectParent);
                $("#mapid").val($("."+cla).find("td").eq(0).html());
                $("#maptitle").val($("."+cla).find("td").eq(1).html());
                $("#mapalias").val($("."+cla).find("td").eq(2).html());
                $("#remark").val($("."+cla).find("td").eq(3).html());
                var mapstatus = $.trim($(".mapstatus"+id ).html());
                $('input[name="status"][title="'+mapstatus+'"]').prop('checked',true);


                title = '编辑道具地图';
            }else {
                $('input[name="status"][value="1"]').prop('checked',true);

                $("#mapid").val('');
                $("#maptitle").val('');
                $("#mapalias").val('');
                $("#remark").val('');
                title = '添加道具地图';

            }
            form.render();

            layer.open({
                type: 1,
                title :title,
                area: ['400px', '450px'],
                content: $(".editmap")
            });
        });

        // 编辑道具地图
        form.on('submit(editmapbut)', function(data){
            // console.log(data.field)
            // return false;

            var url = "{U('Prop/editMap')}";
            $.post(url,data.field,function (res) {
                var data = eval('(' + res + ')');
                if (data.iRet === 0){
                    layer.msg(data.sMsg, {
                        icon: 1,//成功的表情
                        time: 1000,
                        end:function(){
                            window.location.reload();
                        }
                    });

                }else {
                    layer.msg(data.sMsg, {
                        icon: 2,
                        time: 1000
                    });
                }
            });

            return false;


        });

        //删除道具地图
        $('.del-map').click(function () {
            var id = $(this).attr('lay-data');

            layer.confirm('确定删除该道具地图？', {
                btn: ['是','否'], //按钮
                shade: false //不显示遮罩
            }, function(index){

                var data = {
                    "id": id,
                }
                var url = "{U('Prop/delMap')}";
                $.post(url,data,function (res) {
                    var data = eval('(' + res + ')');
                    if (data.iRet === 0){
                        layer.msg('操作成功', {
                            icon: 1,//成功的表情
                            time: 1000
                        });

                    }else {
                        layer.msg('操作失败', {
                            icon: 2,
                            time: 1000
                        });
                    }
                    layer.close(index);

                });
                window.location.reload()

            });
        });

    });

</script>
</body>

</html>